<template>
	<div>
		<div class="banner" @click="handleBannerClick">
			<img class="banner-img" src="http://img1.qunarzz.com/sight/	p0/1412/da/273e834ab7e13fd5a51751d57d20f828.water.jpg_600x330_4f04151b.jpg" alt="">
			<div class="banner-info">
				<div class="banner-title">
				    大连灯冰节日
				</div>
				<div class="banner-number">
					<span class="iconfont banner-icon">&#xe604;</span>
				    39
				</div>
			</div>
		</div>
		<common-gallary
		    :imgs="imgs"
		    v-show="showGallary"
  			@close="handleGallaryClose"
		 >
		 </common-gallary>
	</div>
</template>

<script>
    import CommonGallary from 'common/gallary/Gallary'
	export default {
		name: 'DetailBanner',
		data (){
			return{
				showGallary:false,
				imgs:['http://img1.qunarzz.com/sight/p0/1808/d4/d4b2896dbf969f2aa3.img.jpg_r_800x800_c2236f4a.jpg','http://img1.qunarzz.com/sight/p0/1808/60/60ba0408748db0f2a3.img.jpg_r_800x800_a1aed74a.jpg']
			}
		},
		methods:{
			handleBannerClick(){
				this.showGallary = true
			},
			handleGallaryClose(){
				this.showGallary = false
			}
		},
		components:{
			CommonGallary
		}

	}
</script>

<style lang="stylus" scoped>
	.banner
	  position:relative
	  height:0
	  padding-bottom: 55%
	  overflow: hidden
	  .banner-img
	    width:100%
	  .banner-info
	    display:flex
	    position: absolute
	    left:0
	    right:0
	    bottom: 0
	    line-height: .6rem
	    color:#fff
	    background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
	  .banner-title
	    flex: 1
	    font-size: .32rem
	    padding:0 .2rem
	  .banner-number
	    margin-top .14rem
	    padding: .05rem .32rem
	    height:.32rem
	    line-height: .32rem
	    border-radius: .2rem
	    background: rgba(0,0,0,.8)
	    font-size:.24rem
	    .banner-icon
	      font-size:.24rem
</style>